<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改任务指令')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />

    <style>
        .form-horizontal .form-group {
            margin-right: 0px;
            margin-left: 0px;
        }
        .input-group .form-control{
            width: 60%;
        }
    </style>

</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-centralTaskCmd-edit" th:object="${topCentralTaskCmd}">
            <input name="id" th:field="*{id}" type="hidden">
            <input name="resourcePath" th:field="*{resourcePath}" type="hidden" >
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">任务指令名称：</label>
                <div class="col-sm-8">
                    <input name="name" th:field="*{name}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">操作类型：</label>
                <div class="col-sm-8">
                    <select name="type" class="form-control m-b" th:with="type=${@dict.getType('central_operation_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"  th:field="*{type}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">可执行的路径：</label>
                <div class="col-sm-8">
                    <input name="executable" th:field="*{executable}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">指令类型：</label>
                <div class="col-sm-8">
                    <select name="commandType" class="form-control m-b">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">模板：</label>
                <div class="col-sm-8">
                    <textarea name="template" class="form-control">[[*{template}]]</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">资源路径：</label>
                <div class="col-sm-8">
                    <div class="form-group">
                        <div class="file-loading">
                            <input id="singleFile" name="file" type="file"  >

                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('data_normal_disable')}">
                        <input type="radio" th:id="${'state_' + dict.dictCode}" name="state" th:value="${dict.dictValue}" th:field="*{state}">
                        <label th:for="${'state_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">权重：</label>
                <div class="col-sm-8">
                    <input name="weight" th:field="*{weight}" type="text" class="form-control" >
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">描述：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control">[[*{remark}]]</textarea>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var prefix = ctx + "central/centralTaskCmd";
        $("[name=weight]").inputSpinner();

        $("#form-centralTaskCmd-edit").validate({
            focusCleanup: true
        });


        const resourcePath = [[${topCentralTaskCmd.resourcePath}]]
        let orderToUpload = false

        function submitHandler() {

            const newResourcePath = $("[name=resourcePath]").val()
            if(newResourcePath && newResourcePath!=resourcePath){
                const filesCount = $('#singleFile').fileinput('getFilesCount');
                if(filesCount){
                    orderToUpload = true
                    $("#singleFile").fileinput('upload');
                    return;
                }
            }
            if ($.validate.form()) {
                $.operation.update(prefix, $.common.formToJSON());
            }
        }


        $(document).ready(function () {
            const initialPreview = [];
            const initialPreviewConfig = [];
            if($.common.isNotEmpty(resourcePath)){
                let splitSymbol = '\\';
                if(!resourcePath.includes(splitSymbol)){
                    splitSymbol = '/';
                }
                const [fileName, ...folders] = resourcePath.split(splitSymbol).reverse();

                const extra = {filePath:resourcePath}

                if($.operate.checkImgType(fileName)){

                    initialPreview.push(resourcePath)//( "<img src='"+resourcePath+"' class='file-preview-image' >")
                    initialPreviewConfig.push({caption: fileName,type:'image',extra:extra})
                }else{
                    const suffix = fileName.split('.').pop();
                    let type = suffix
                    if(suffix == 'txt'){
                        type = 'text'
                    }
                    initialPreview.push(resourcePath)
                    initialPreviewConfig.push({caption: fileName,type:type,extra:extra})
                }
            }
            // 单图上传
            $("#singleFile").fileinput({
                // language: 'zh', //设置语言
                // uploadUrl: ctx + 'common/upload',
                // deleteUrl: ctx + 'common/delete',
                // //allowedFileTypes:[],
                // maxFileCount: 1,
                // autoReplace: true,
                // enctype: 'multipart/form-data',
                // validateInitialCount:true,
                // validateInitialCount:true,
                // msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                // initialPreview:initialPreview,
                // initialPreviewConfig:initialPreviewConfig,
                // overwriteInitial:false,//不覆盖之前的文件
                // initialPreviewShowDelete:true,	//是否显示初始化数据的删除按钮
                // fileSizeGetter:true,
                // initialPreviewAsData: true, // defaults markup
                // uploadExtraData(){
                //     return {directoryName:"sources/",byDate:false}
                // }
                uploadUrl: ctx + 'common/upload',
                deleteUrl: ctx + 'common/delete',
                maxFileCount: 1,
                autoReplace: true,
                showClose: false, //隐藏右上角叉
                showRemove: false, //隐藏清除按钮
                uploadExtraData: {directoryName:"sources/",byDate:false},
                initialPreview: initialPreview,
                initialPreviewConfig: initialPreviewConfig,
                initialPreviewAsData: true, // defaults markup
                fileSizeGetter:true,
                overwriteInitial:false
            }).on('fileuploaded', function (event, data, previewId, index) {
                var rsp = data.response;
                $("[name=resourcePath]").val(rsp.fileName);
                if(orderToUpload){
                    if ($.validate.form()) {
                        $.operation.update(prefix, $.common.formToJSON());
                    }
                }
            }).on('fileremoved', function (event, id, index) {
                $("input[name='" + event.currentTarget.id + "']").val('')
                $("[name=resourcePath]").val('');
            }).on('filedeleted', function (event, data, previewId, index) {
                $("[name=resourcePath]").val('');
                $.axiosRequest.put(prefix+"/updateFilePath",{id:[[${topCentralTaskCmd.id}]],resourcePath:resourcePath})
                return true
            })

            // .on('filesuccessremove', function (event, data, previewId, index) {
            //     const res = data.response
            //     if($.common.requestSuccess(res.code)){
            //         $("[name=resourcePath]").val('');
            //         return true
            //     }
            //     $.modal.msgError(res.msg);
            //     return false
            // })
        });

    </script>
</body>
</html>